<!-- 产品详情 -->
<template>
  <div class="product_detail">
    <header
      v-if="Back.product_back"
      :style="'background: url(' + Back.product_back + ') no-repeat 50% 50%;'"
    >
      <span>{{ i18n.navigation.product }}</span>
    </header>
    <h3>{{ data.title }}</h3>
    <p class="share">
      <span>
        <i>
          <img :src="require('@/assets/journalism/2.png')" />
          {{data.view_num}}
        </i>
        <i @click="generateQRCode">
          <img :src="require('@/assets/journalism/3.png')" />
          {{ i18n.journalism.share }}
        </i>
      </span>
      <span>{{ i18n.journalism.time }}：{{ data.create_time }}</span>
    </p>
    <main :style="'font-size: '+(width <= 768?1:0.375)+'rem;'" v-html="data.content"></main>
    <button @click="$method.return(-1)">{{ i18n.detail }} ></button>
    <el-dialog width="260px" :visible.sync="dialogVisible" :title="i18n.Share">
      <img v-if="qrCodeDataUrl" style="margin: 0 auto;display: block;width: 200px;" :src="qrCodeDataUrl" />
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "@/config/emit";
import QRCode from "qrcode";

export default {
  name: "product_detail",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      id: "",
      data: {},
      Back: {},
      qrCodeDataUrl: null,
      dialogVisible: false,
    };
  },
  props: ["width"],
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    generateQRCode() {
      const qrCodeUrl = location.href;
      QRCode.toDataURL(qrCodeUrl, (err, url) => {
        if (err) {
          console.error(err);
        } else {
          this.qrCodeDataUrl = url;
          this.dialogVisible = true;
        }
      });
    },
    articleDetail() {
      this.$getRequest("/index/articleDetail", { id: this.id }).then((res) => {
        this.data = res.data;
      });
    },
    getBack() {
      this.$getRequest("/index/getBack").then((res) => {
        this.Back = res.data;
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id
    this.articleDetail();
    this.getBack();
    bus.$on("lang", () => {
      if (this.$route.name == "/product_detail") {
        this.articleDetail();
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.product_detail {
  .el-dialog__header{
    .el-dialog__title{
      text-align: center;
      display: block;
      width: 100%;
    }
  }
  & > h3 {
    text-align: center;
    margin: 1.125rem 0 0.625rem;
    font-size: 0.375rem;
  }
  & > main {
    width: 17.5rem;
    margin: 0 auto 0.875rem;
    & > * {
      width: 100%;
    }
  }
  & > button {
    width: 1.875rem;
    height: 0.625rem;
    border-radius: 0.3125rem;
    background: #dfdfdf;
    font-size: 0.25rem;
    margin: 0 auto 2rem;
    color: #999999;
    display: block;
  }
  & > .share {
    width: 10rem;
    margin: 0.625rem auto 1.125rem;
    display: flex;
    color: #999999;
    font-size: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > span {
      display: flex;
      align-items: center;
      & > i {
        margin-right: 0.875rem;
        display: flex;
        align-items: center;

        & > img {
          width: 0.275rem;
          margin-right: 0.25rem;
        }
      }
    }
  }
  & > header {
    width: 100%;
    height: 7.5rem;
    background-size: 100% 100% !important;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .product_detail {
    & > h3 {
      text-align: center;
      margin: 2rem 0 1rem;
      font-size: 1.8rem;
    }
    & > main {
      width: 33.5rem;
      margin: 0 auto 1rem;
    }
    & > button {
      width: 8rem;
      height: 2.5rem;
      border-radius: 1.25rem;
      font-size: 1.4rem;
    }
    & > .share {
      width: 33.5rem;
      margin: 1rem auto 2rem;
      font-size: 1rem;
      & > span {
        display: flex;
        align-items: center;
        i {
          margin-right: 2rem;

          & > img {
            width: 1rem;
            margin-right: 1rem;
          }
        }
      }
    }
    & > header {
      height: 20rem;
      background-size: auto 100% !important;
      font-size: 1.5rem;
    }
  }
}
</style>